<template>
  <div class="publish_detail_list">
    <header-bar tittle="任务详情" sticky />
    <div class="bg"></div>
    <van-sticky>
      <div
        class="itemList u-flex-bet"
        style="padding:10px 15px;background: #FFFFFF;"
      >
        <div class="u-flex">
          <van-image
            width="88rem"
            height="88rem"
            round
            :src="obj.avatar ? obj.avatar : defaults"
          />
          <div class="item" style="text-align: left;">
            <div class="title1">{{ obj.name }}</div>
            <div class="title2">
              剩余数量:
              <span style="color:red">{{ obj.accept_num }}</span>
              /{{ obj.num }}
            </div>
          </div>
        </div>

        <div class="statu u-flex">
          <div>+{{ obj.amount }}</div>
          <van-image
            width="36rem"
            height="36rem"
            :src="require('@/assets/images/index/icon_coin@2x.png')"
          />
        </div>
      </div>

      <div class="btn-box u-flex-center">
        <div class="btn btn-1 u-flex-center">接单详情</div>
        <div class="btn btn-2 u-flex-center" @click="editTask">编辑任务</div>
      </div>
    </van-sticky>

    <div class="list-box">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" @load="onLoad">
          <van-cell
            v-for="item in Alllists"
            :key="item.id"
            @click="reach(item.id)"
          >
            <div class="list u-flex-bet">
              <div class="u-flex">
                <van-image
                  width="88rem"
                  height="88rem"
                  round
                  :src="item.avatar ? item.avatar : defaults"
                />
                <div class="item">
                  <div class="title1">{{ item.users_name }}</div>
                  <div class="title2">{{ item.create_time }}</div>
                </div>
              </div>

              <div class="statu">{{ item.status | fliterKind }}</div>
            </div>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import header from "@/components/header/header.vue";
import { Field } from "vant";
import {
  Button,
  Toast,
  Image as VanImage,
  Cell,
  CellGroup,
  List,
  Tab,
  Tabs,
} from "vant";
import { API_PATH } from "@/api/index.js";
import { TASK_ACCEPT_LIST, TASK_SIMPLE, TASK_DETAIL } from "@/api/api.js";

Vue.use(Field);
Vue.use(VanImage);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(List);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Toast);
export default {
  name: "publishDetailList",
  components: {
    [header.name]: header,
    [Button.name]: Button,
  },
  data() {
    return {
      value1: "",
      value2: "",
      active: 0,
      obj: "",
      list: [],
      // 下拉
      Alllists: [],
      curId: 0,
      // 下拉
      isLoading: true,
      loading: false,
      finished: false,
      time: 0,
      p: "",
      defaults: require("../.././assets/images/avator.png"),
      tabList: [
        { t: "全部", id: "0" },
        { t: "待提交", id: "1" },
        { t: "待确认", id: "2" },
        { t: "未通过", id: "3" },
        { t: "维权", id: "4" },
        { t: "已通过", id: "5" },
      ],
    };
  },
  filters: {
    fliterKind(msg) {
      switch (msg) {
        case 1:
          return "待提交";
          break;
        case 2:
          return "待确认";
          break;
        case 3:
          return "未通过";
          break;
        case 4:
          return "维权";
          break;
        case 5:
          return "完成";
          break;
      }
    },
  },
  mounted() {
    let data = this.$route.query.data;
    let obj = decodeURI(data);
    let obj1 = JSON.parse(obj);
    this.getAllList(obj1.id);
    this.obj = obj1;
  },
  methods: {
    onLoad() {
      console.log(this.time);
      this.loading = false;
      if (this.time != 0) {
        let that = this;
        that.LoadList(that.p);
      }
      this.Alllists.push(
        { users_name: "xxx", create_time: 100, status: 1, price: 100 },
        { users_name: "xxx11", create_time: 100, status: 1, price: 100 }
      );
    },
    async getAllList(id) {
      const { data } = await this.$reqGet(TASK_SIMPLE + "/" + id, {});
      if (data.status == 1) {
        let list = data.data.acceptList;
        let p = data.data.nextPage.value;
        this.p = p;
        this.Alllists = list;
        this.time = 1;
        this.loading = false;
        this.finished = false;
      }
    },
    async LoadList(p) {
      this.loading = true;
      if (p) {
        const { data } = await this.$reqGet(TASK_SIMPLE + "/" + id, {
          p: p,
        });
        if (data.status == 1) {
          let list = data.data.acceptList;
          let p = data.data.nextPage.value ? data.data.nextPage.value : false;
          this.p = p;
          this.Alllists = this.Alllists.concat(list);
          this.loading = false;
        }
      } else {
        this.finished = true;
      }
    },
    editTask() {
      this.getDetail(this.obj.id);
    },
    reach(id) {
      this.$router.push({ name: "jiedan", query: { id: id, type: 1 } });
    },
    async getDetail(id) {
      const { data } = await this.$reqGet(TASK_DETAIL + "/" + id, {});
      if (data.status == 1) {
        this.$router.push({ name: "taskEdit", query: { id: this.obj.id } });
      } else {
        Toast(data.info);
      }
    },
    onRefresh() {
      this.getAllList(this.obj.id);
      let that = this;
      setTimeout(() => {
        that.isLoading = false;
        that.finished = false;
        that.loading = false;
      }, 1000);
      // that.$nextTick(() => {
      // 	document.querySelector('#list').scrollTop = 0;
      // });
    },
  },
};
</script>
<style lang="scss" scoped>
.publish_detail_list {
  min-height: 100vh;
  background-color: #f5f5f5;

  .bg {
    height: 212rem;
    background: linear-gradient(
      180deg,
      #2f81fe 80%,
      rgba(47, 129, 254, 0) 100%
    );
  }

  .itemList {
    position: relative;
    margin: 24rem;
    padding: 24rem;
    border-radius: 20rem;

    .item {
      margin-left: 34rem;

      .title1 {
        font-weight: bold;
        font-size: 32rem;
      }

      .title2 {
        color: #999;
        font-size: 28rem;
      }
    }

    .statu {
      color: #ff3434;
      font-weight: bold;
      font-size: 36rem;

      > div {
        margin-right: 12rem;
      }
    }
  }

  .btn-box {
    margin: 80rem 0 40rem;
    padding: 0 24rem;

    .btn {
      flex: 1;
      color: #fff;
      font-size: 32rem;
      font-weight: bold;
      height: 88rem;
      border-radius: 44rem;
    }

    .btn-1 {
      margin-right: 22rem;
      background: linear-gradient(134deg, #fdc300 0%, #ff910f 100%);
    }

    .btn-2 {
      background: linear-gradient(145deg, #2cb1ff 0%, #2f81fe 100%);
    }
  }

  .list-box {
    padding: 0 24rem;

    .van-cell {
      border-radius: 20rem;
      margin-bottom: 20rem;

      .list {
        width: 100%;

        .item {
          margin-left: 34rem;

          .title1 {
            font-size: 32rem;
            font-weight: bold;
          }

          .title2 {
            color: #999;
            font-size: 28rem;
          }
        }

        .statu {
          font-size: 36rem;
          color: #ff4343;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
